<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		#wrap{
			width: 200px;
			height: 350px;
			border:5px solid black;
			margin:100px auto 0;
			position: relative;
			overflow: hidden; 
		}
		img{
			width: 200px;
			height: 350px;
			float: left;
		}
		#content{
			width: 800px;
			height: 350px;
			position: absolute;
			top:0;
			left: 0;
		}
		#left,#right{
			width: 30px;
			height: 30px;
			border-radius:50%;
			background: black;
			color: white;
			position: absolute;
			top:calc(50%-15px);
			text-align: center;
			line-height: 26px;
			left: 10px;
		}
		#right{
			left: calc(100% - 40px);
		}
		#wrap>.dot{
			font-size: 0;
			text-align: center;
			height: 10px;
			position: absolute;
			width: 100%;
			bottom: 20px;
		}
		#wrap span{
			display: inline-block;
			width: 10px;
			height: 10px;
			background: white;
			border-radius: 50%;
			margin:0 10px;
			cursor: pointer;
		}
		#wrap.gray{
			background: gray;
		}
	</style>

</head>
<body>
	<div id="wrap">
		<div id="content">
			<img src="a3.jpg" alt="">
			<img src="a4.jpg" alt="">
			<img src="a5.jpg" alt="">
			<img src="a3.jpg" alt="">
		</div>
		<button id="left"><<</button>
		<button id="right">>></button>
		<div class="dot">
			<span class="gray"></span>
			<span></span>
			<span></span>
		</div>
	</div>
</body>
</html>
<script>
	//获取元素
	var wrapDiv = document.getElementById("wrap");
	var contentDiv = document.getElementById("content");

    
    //记录初始位置
	var left = 0;

	var timerId = setInterval(autoscroll,20);

	var timeout;

	var index = 0;

	var w = wrapDiv.clientWith;//使不受图片大小影响
     // var timerId = requestAnimationFrame(autoscroll,20);

	function autoscroll(){
		left -= 2;
		contentDiv.style.left = left + "px";

		if(left % 200 == 0){
			index++;
			clearInterval(timerId);
			timeout = setTimeout(function(){
				timerId = setInterval(autoscroll,20);
			},2000);
			//如果跑到最后一张，切到第一张
			if(left == -600){
				left = 0;
				contentDiv.style.left = left + "px";
				index =0;
			}
			changeDot();
		}

       
       
         // requestAnimationFrame(autoscroll,20);
	}
	wrapDiv.onmouseover = function(){
		clearInterval(timerId);
		clearTimeout(timeout);

	};
	wrapDiv.onmouseout = function(){
		timerId = setInterval(autoscroll,20);
	};
     //左边按钮点击事件
	var leftBtn = document.getElementById("left");
	leftBtn.onclick = leftClickAction;
	function leftClickAction(){
		if(contentDiv.offsetLeft % 200 == 0){
			index--;
		}
		// index--;
		if(index == -1){
			index = 2;
		}
		changeDot();
		left = -200 * index;
		contentDiv.style.left = left + "px";
	}
    
    var rightBtn = document.getElementById("right");
    rightBtn.onclick = rightClickAction;
	//右边按钮点击事件
	function rightClickAction(){
		index++;
		if(index == 3){
			index = 0;
		}
		changeDot();
		left = -200 * index;
		contentDiv.style.left = left + "px";
	}
	//获取所有span
	var spanArr = document.querySelectorAll("#wrap span");
	//改变小点点
	function changeDot(){
          [].slice.call(spanArr).forEach(function(ele){
          	ele.className = "";
          });
          spanArr[index].className = "gray";
	}
	//小点点点击事件
	for(var i = 0; i < spanArr.length; i++){
		spanArr[i].index = i;
		spanArr[i].onclick = function(){
			index = this.index;
			left = -200 * index;
			contentDiv.style.left = left + "px";
			changeDot();
		}
	}

</script>